<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
  <head>
    <title></title>
    <script type="text/javascript" src="${staticWebsite}js/jquery-1.7.2.js"></script>
     <link rel="stylesheet" href="${staticWebsite}css/common/album.css" type="text/css"/>
     <script type="text/javascript">
	$(document).ready(function(){
	     //鼠标经过关闭的事件
       	  $("#closeImg").live("mouseover",function(){
       	      $(this).attr("src","${staticWebsite}image/album/popCloseRed.jpg");
       	  });
       	  
       	   //鼠标移开关闭触发的事件
    	  $("#closeImg").live("mouseleave",function(){
    	      $(this).attr("src","${staticWebsite}image/album/popCloseGray.jpg");
    	  });  
       	
       	//点击上传图片 
       	$("#uploadImg").live("click",function(){
       	   var thisObj=$(this);
       	   var fileInput="<div><input type='file' name='images'  class='fileInput' value=''/><input type='button' class='addMore' value='+'><input type='button' class='del' value='-'></div>";
       	   $("#inputDiv").prepend(fileInput);
       	   thisObj.remove();
       	});
       	
       	
       	//文件输入框改变 
       	$(".fileInput").live("change",function(){
         	//alert($(this).val());
       	   $("#popContent").prepend("<img src='"+$(this).val()+"'/>");
       	});
       	
       	//点击"+"
       	$(".addMore").live("click",function(){
       	    var thisObj=$(this);
       	    var fileInput="<div><input type='file' name='images' class='fileInput' value=''/><input type='button' class='addMore' value='+'><input type='button' class='del' value='-'></div>";
       	    thisObj.parent().after(fileInput);
       	});
       	
       	//点击"-"
       	$(".del").live("click",function(){
       	    var len=$("input[class='del']").length;
       	    if(len>1){
       	    	$(this).parent().remove();
       	    }
       	});
       	
       	//点击创建新相册 
       	$("#createNew").click(function(){
       	    $("#createModul").css("display","block");
       	});
       	
       	//创建新相册 
       	$("#saveNewAlbum").click(function(){
       	    var thisObj=$(this);
       	    var albumName=$(this).parent().prev().prev().children().val();
       	    var shareType=$(this).parent().prev().children().val();
       	    $.ajax({
						type:"post",
						data:"albumName="+$.trim(albumName)+"&shareType="+shareType,
						url:"${website}album/album_ajax_createAlbum.action",
						success:function(obj){
						    	$("#albumSelect").html(obj);
						    	$("#albumSelect").get(0).selectedIndex=$("#albumSelect").get(0).options.length-1;
							}
				});
			
			$("#createModul").css("display","none");
       	});
       	
       	//取消创建新相册 
       	$("#cancelNewAlbum").click(function(){
       	   $("#createModul").css("display","none");
       	});
       	
       	  
	   //点击关闭
		$("#closeImg").click(function(){
		self.parent.tb_remove();
	});
		});
		
 
		
</script>

  </head>
  
  <body>
  <div id="container">
    <div id="popHead">
        <div style="float:left;">上传照片</div>
        <div style="float:right;"><img id="closeImg" align="right" src="${staticWebsite}image/album/popCloseGray.jpg"/></div>
    </div>
    <div class="clearfloat"></div>

 <form id="imageForm" action="${website}album/album_imageUpload.action" target="_blank"  method="post" enctype="multipart/form-data">
	    <div id="popContent">
	      
	          <div align="center" id="inputDiv"><img id="uploadImg" src="${staticWebsite}image/album/uploadButn.jpg"/></div>
	        
	    </div>
	   
	   <div id="popBotton">
	       <div style="float:left;">选择相册:
	       <select id="albumSelect" name="albumId">
	        <c:forEach items="${albumList}" var="i">
	           <option value="${i.id}">${i.albumName}</option>   
	        </c:forEach>
	        </select>
	        <a href="#" id="createNew">创建新相册</a></div>
	        <div align="center" style="float:right;"><input type="submit" value="保存"/></div>
	    </div>
   </form>
    </div>
    <div class="clearfloat"></div>
    
    <div id="createModul" style="position:absolute;top:40%;left:30%;display:none;">
         <div> 相册名称:<input type="text" /> </div>
         <div>谁能浏览:
	      <select name="shareType">
	         <c:forEach items="${shareTypeList}" var="i">
	            <option value="${i.id}">${i.typeName}</option>
	         </c:forEach>
	      </select></div>
	      <div><input id="saveNewAlbum" type="button" value="保存"/><input id="cancelNewAlbum" type="button" value="取消"/></div>
     </div>
  </body>
</html>
